<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>配置管理</el-breadcrumb-item>
      <el-breadcrumb-item>茶益堂列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" class="toolbar">
        <el-form-item>
          <el-button @click="addRoot" type="success" style="padding:8px 10px; font-size: 12px;">添加信息</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        highlight-current-row
        v-loading="gridLoading"
        class="grid"
        style="width: 100%；"
      >
        <el-table-column label="id" prop="id" width="80"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <!-- <el-table-column label="内容" prop="content" >
                     <template slot-scope="scope">
                         <div v-html="getitem(scope.row.content)" class="content"></div>
                     </template>
        </el-table-column>-->
        <!-- <el-table-column label="时间" prop="createTime"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="check(scope.row)">编辑</el-button>
            <!-- <el-button size="small" @click="check(scope.row)">修改</el-button> -->
          </template>
          <!-- <template slot-scope="scope">
              
                  <el-button size="small" @click="check(scope.row)">修改</el-button>
          </template>-->
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchfrom.pageNo"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="searchfrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="添加信息" :visible.sync="addDialogVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-position="left" label-width="130px" ref="addForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" auto-complete="off" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <squill-editor-qiniu
            :token="form.token"
            v-model="addForm.content"
            :domain="form.domain"
            :uploadUrl="form.Url"
            ref="squill"
          ></squill-editor-qiniu>
          <!-- <quill-editor v-model="addForm.content" ref="myQuillEditor"></quill-editor> -->
        </el-form-item>
        <el-form-item label="内容" prop="remark">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="addForm.content"></el-input>
        </el-form-item>
        <el-form-item label="是否跳转" prop="remark">
          <el-switch v-model="addForm.remark" @change="addFromSwitch"></el-switch>
        </el-form-item>
        <el-form-item label="是否启用" prop="remark">
          <el-switch v-model="addForm.disabled" @change="addFromSwitchTwo"></el-switch>
        </el-form-item>
        <el-form-item label="是否为富文本" prop="remark">
          <el-switch v-model="addForm.isFwb" @change="addFromSwitchThree"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit" :loading="addFormLoading">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑公告" :visible.sync="editDialogVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-position="left" label-width="130px" ref="editForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" auto-complete="off" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <squill-editor-qiniu
            :token="form.token"
            v-model="editForm.content"
            :domain="form.domain"
            :uploadUrl="form.Url"
            ref="squill"
          ></squill-editor-qiniu>
          <!--https://vdept.bdstatic.com/3961494a587a43704a43545772687177/3542366e53645731/734467e27b1044b4eaeef992485d66d2a3470792822b8faf5dea313302618fd7a970f21693831c5e6eaa2da6bbff9a02.mp4?auth_key=1596692286-0-0-4d2c6f66058e95e9db5e63594a3008ea-->
          <!-- <quill-editor v-model="editForm.content" ref="myQuillEditor" ></quill-editor> -->
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="editForm.content"></el-input>
        </el-form-item>
        <el-form-item label="是否跳转">
          <el-switch v-model="editForm.remark" @change="editFromSwitch"></el-switch>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="editForm.disabled" @change="editFromSwitchTwo"></el-switch>
        </el-form-item>
        <el-form-item label="是否为富文本">
          <el-switch v-model="editForm.isFwb" @change="editFromSwitchThree"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFormSubmit" :loading="editFormLoading">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SquillEditorQiniu from "@/components/quill-editor/quill-editor";
export default {
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      content1: "",
      dataList: [],
      editForm: {
        id: "",
        title: "",
        content: "",
        remark: null,
        disabled: null,
        parentId:0,
        isFwb:null
      },
      addForm: {
        id: 0,
        title: "",
        content: "",
        remark: true,
        disabled: true,
        parentId:0,
        isFwb:true
      },
      searchfrom: {
        pageNo: 1,
        pageSize: 10,
      },
      form: {
        token: "", //七牛token
        Url: "", //获取上传路径
        domain: "", //上传路径 二级
      },
    };
  },
  components: {
    SquillEditorQiniu,
  },
  created() {
    this.getanncment();
    this.getQnToken();
  },
  computed: {},
  methods: {
    addFromSwitchThree(e){
      this.addForm.isFwb=e;
    },
    editFromSwitchThree(e){
      this.editForm.isFwb=e;
    },
    addFromSwitchTwo(e){
      this.addForm.disabled=e;
    },
    editFromSwitchTwo(e){
      this.editForm.disabled=e;
    },
    addFromSwitch(e) {
      console.log(e);
      this.addForm.remark = e;
    },
    editFromSwitch(e) {
      console.log(e);
      this.editForm.remark = e;
    },
    async getQnToken() {
      const { data: res } = await this.$http.post(
        "/manage/userFile/qiNiuUpload",
        {}
      );
      console.log(res.data.token);
      this.form.token = res.data.token;
      //this.params.token=res.data.token;
      this.form.domain = res.data.domain;
      this.form.Url = res.data.upload_url;
    },
    getitem(row) {
      console.log(row);
      let c1 = row.replace(/<img style="width: 100px;height: 50px;"/g, "<img");
      let c2 = c1.replace(/<img/g, '<img style="width: 100px;height: 50px;"');
      this.content1 = c2;
      return this.content1;
    },
    check(row) {
      console.log(row);
      //console.log(this.$refs.squill);
      this.editForm.id = row.id;
      this.editForm.title = row.title;
      this.editForm.content = row.content;
      if (row.disabled == 0) {
        this.editForm.disabled = true;
      } else {
        this.editForm.disabled = false;
      }
      this.editForm.parentId=row.parentId;

      if (row.isHErf == 1) {
        this.editForm.remark = true;
      } else {
        this.editForm.remark = false;
      }
      if (row.isFwb == 1) {
        this.editForm.isFwb = true;
      } else {
        this.editForm.isFwb = false;
      }
      this.editDialogVisible = true;

      setTimeout(()=>{
        this.$refs.squill.content = row.content;
        console.log(this.editForm);
      },300)
      
      //this.$refs.squill.content = row.content;
      //console.log(this.$refs.squill.content);
    },
    editFormSubmit() {
      let params = {
        id: this.editForm.id,
        title: this.editForm.title,
        content: this.editForm.content,
        isHErf: "",
        disabled: '',
        parentId:this.editForm.parentId,
        isFwb:''
      };
      if (this.editForm.disabled) {
        params.disabled = 0;
      } else {
        params.disabled = 1;
      }
      if (this.editForm.remark) {
        params.isHErf = 1;
      } else {
        params.isHErf = 0;
      }
      if (this.editForm.isFwb) {
        params.isFwb = 1;
      } else {
        params.isFwb = 0;
      }
      this.$http.post("/manage/conf/teaSchoolAddEdit", params).then((res) => {
        this.editDialogVisible = false;
        if (res.data.status == 1) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getanncment();
        } else {
          this.$message({
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
    addRoot() {
      this.addForm.id = "";
      this.addForm.title = "";
      this.addForm.content = "";
      this.addForm.disabled = true;
      this.addForm.remark = true;
      this.addForm.isFwb=true;
      this.addDialogVisible = true;
      setTimeout(()=>{
        this.$refs.squill.content = "";
      },300)
    },
    // 监听 pagesize 的变化
    handleSizeChange(newSize) {
      // 把最新的 pagesize 赋值给 this.queryinfo
      this.searchfrom.pageSize = newSize;
      this.getanncment();
    },
    // 监听 页码值 的变化
    handleCurrentChange(newPageNum) {
      console.log(newPageNum);
      this.searchfrom.pageNo = newPageNum;
      this.getanncment();
    },
    addFormSubmit() {
      // let c1 = this.addForm.content.replace(/</g, "&lt;");
      // let c2 = c1.replace(/&lt;/g, "<");
      // let c3 = c2.replace(/>/g, "&gt;");
      // let c4 = c3.replace(/&gt;/g, ">");
      // this.addForm.content = c4;

      console.log(this.addForm);
      let params = {
        id: this.addForm.id,
        title: this.addForm.title,
        content: this.addForm.content,
        isHErf: "",
        disabled: "",
        parentId:this.addForm.parentId,
        isFwb:''
      };
      console.log(this.addForm.remark);
      if (this.addForm.remark) {
        params.isHErf = 1;
      } else {
        params.isHErf = 0;
      }
      if (this.addForm.disabled) {
        params.disabled = 0;
      } else {
        params.disabled = 1;
      }
      if (this.addForm.isFwb) {
        params.isFwb = 1;
      } else {
        params.isFwb = 0;
      }
      this.$http.post("/manage/conf/teaSchoolAddEdit", params).then((res) => {
        // console.log(res)
        this.addDialogVisible = false;
        if (res.data.status == 1) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getanncment();
        } else {
          this.$message({
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
    getanncment() {
      this.$http
        .post("/manage/conf/teaSchoolList", this.searchfrom)
        .then((res) => {
          if (res.data.status == 1) {
            // console.log()
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  img {
    width: 100px;
    height: 50px;
  }
}
</style>
